<template>
	<div class="index">
		<el-row :gutter="30">
			<el-col class="index-head" :span="24">
				<el-col :lg="18" :xl="20">
					<div class="index-head-left">学员模拟缴费</div>
					<div class="quick-entrance">
						<ul>
							<li class="quick-entrance-item">快捷入口：</li>
							<li class="quick-entrance-item">
								<router-link to="/income/stupayment">报名</router-link>
							</li>
							<li class="quick-entrance-item">
								<router-link to="/income/contractfee">包库</router-link>
							</li>
							<li class="quick-entrance-item">
								<router-link to="/income/extrafee">加时</router-link>
							</li>
						</ul>
					</div>
				</el-col>
			</el-col>
		</el-row>
		<el-row :gutter="30">
			<el-col :lg="18" :xl="20" class="my-artcle">
				<div class="student-select">
					<p class="student-select-title">学员查询</p>
					<el-input placeholder="输入学员证件号码" v-model="search" class="input-with-select">
						<el-button slot="append" icon="el-icon-search" @click="searchStu">查询</el-button>
					</el-input>
				</div>
				<div class="pay-method">
					<div class="pay-method-con">
						<el-form labelPosition="right" label-width="180px" ref="form" :model="form" :rules="rules" class="quane-pay">
							<el-form-item label="模拟科目：">
								<el-radio-group v-model="form.subject">
									<el-radio label="2">科目二</el-radio>
									<el-radio label="3">科目三</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="类型：">
								<el-radio-group v-model="form.buyType">
									<el-radio label="1">按小时</el-radio>
									<el-radio label="2">按圈数</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="购买数量：" prop="buyCount">
								<el-input-number class="pay-method-ipt" :min="1" v-model="form.buyCount"></el-input-number>
							</el-form-item>
							<el-form-item label="总金额：" prop="amount">
								<el-input class="pay-method-ipt total padding-right" v-model="form.amount" :maxlength="5"></el-input>
							</el-form-item>
							<el-form-item label="支付方式：">
								<el-radio-group v-model="form.paymentMethod">
									<el-radio label="3">现金</el-radio>
									<el-radio label="4">刷卡</el-radio>
									<el-radio label="1">支付宝</el-radio>
									<el-radio label="2">微信</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="截止有效日期：" class="endtime" prop="vldDate">
								<el-date-picker v-model="form.vldDate" class="pay-method-ipt" type="date" placeholder="输入有效期..." value-format="yyyy-MM-dd" :default-value="$moment().add(3, 'y').toDate()"></el-date-picker>
							</el-form-item>
							<input type="button" class="submit-btn" @click="submitForm" value="提   交">
						</el-form>
					</div>
				</div>
			</el-col>
			<el-col :lg="6" :xl="4">
				<student-info :stuData="stuData"></student-info>
			</el-col>
		</el-row>
		<!-- 信息确认 -->
		<confirm v-model="confirmShow" title="模拟费信息确认" @onSubmit="onSubmit">
			<submit-item label="姓名" :value="stuData.name"></submit-item>
			<submit-item label="性别" :value="$dicCache.getNameByMarkAndVal('XBDM', stuData.sex)"></submit-item>
			<submit-item label="证件号码" :value="stuData.cardnum"></submit-item>
			<submit-item label="培训车型" :value="stuData.traintype"></submit-item>
			<submit-item label="手机号码" :value="stuData.phone"></submit-item>
			<submit-item label="模拟科目" :value="form.subject=='2'?'科目二':'科目三'"></submit-item>
			<submit-item label="购买类型" :value="form.buyType=='1'?'按小时':form.buyType=='2'?'按圈数':''"></submit-item>
			<submit-item label="购买数量" :value="form.buyCount"></submit-item>
			<submit-item label="总金额" :value="form.amount"></submit-item>
			<submit-item label="支付方式" :value="form.paymentMethod=='1'?'支付宝':form.paymentMethod=='2'?'微信':form.paymentMethod=='3'?'现金':form.paymentMethod=='4'?'刷卡':'未知'"></submit-item>
			<submit-item label="有效日期" :value="form.vldDate"></submit-item>
		</confirm>
	</div>
</template>

<script>
	import studentInfo from "@/components/student-info";
	import confirm from "@/components/income-submit";
	import submitItem from "@/components/submit-item";

	export default {
		name: "simulationfee",
		components: {
			studentInfo,
			confirm,
			submitItem
		},
		data() {
			return {
				search: '',
				stuData: {},
				form: {
					subject: '2',
					buyType: '1',
					buyCount: '',
					amount: '',
					paymentMethod: '3',
					vldDate: this.$moment().add(3, 'y').format('YYYY-MM-DD')
				},
				rules: {
					amount: [{
							required: true,
							message: "请输入总金额！",
							trigger: "blur"
						},
						{
							max: 5,
							message: "最大长度 5 个字符",
							trigger: "blur"
						}
					],
					vldDate: [{
						required: true,
						message: "请选择日期",
						trigger: "change"
					}]
				},
				confirmShow: false, //信息确认
			};
		},
		methods: {
			searchStu() {
				if(this.search != "") {
					this.$http.get(process.env.JXH_API_HOST + "api/student/" + this.search, {
						_t: Math.random()
					}, (d) => {
						if(d.resultCode == 0) {
							this.stuData = d.record;
						} else {
							layer.msg(d.msg, {
								shift: 6,
								shade: 0.3
							});
							this.stuData = {};
						}
					});
				}
			},
			submitForm() {
				if(this.stuData.studentId) {
					this.$refs.form.validate(valid => {
						if(!valid) {
							return false;
						}
						this.confirmShow = true;
					});
				} else {
					layer.msg('请先查询学员信息！', {
						shift: 6,
						shade: 0.3
					});
				}

			},
			onSubmit() {
				this.$http.post('iem/addSimulationFee', {
					stuBh: this.stuData.studentId,
					stuName: this.stuData.name,
					idCard: this.stuData.cardnum,
					phone: this.stuData.phone,
					traintype: this.stuData.traintype,
					paymentMethod: this.form.paymentMethod,
					subject: this.form.subject,
					buyType: this.form.buyType,
					buyCount: this.form.buyCount,
					amount: this.form.amount,
					vldDate: this.form.vldDate
				}, (d) => {
					if(d.status == '1') {
						layer.msg(d.msg, {
							time: 1000,
							shade: 0.3
						}, function() {
							layer.confirm('是否打印小票？', {
								title: '打印确认',
								btn: ['是', '否']
							}, function() {
								window.open(process.env.API_BASH_URL + "print/mnf/" + d.data.obj, "_blank", "directories=0,location=0,menubar=0,scrollbars=0,status=0,titlebar=0,toolbar=0");
								top.location.reload();
							}, function() {
								top.location.reload();
							});
						});
					} else {
						layer.msg(d.msg, {
							shift: 6
						});
					}
				});
			}
		}
	}
</script>

<style>

</style>